<template>
  <div class="self-check">
    <!-- php表格 -->
    <subtable :table-label="phpLabel" :table-data="phpData">
      <el-table-column slot="first" label="环境监测" align="center" min-width="10">
        <template slot-scope="scope">
          {{ scope.row.title }}
          <p v-if="scope.row.subtitle" style="margin:0;color:#737373;">{{ scope.row.subtitle }}</p>
        </template>
      </el-table-column>
    </subtable>
    <!-- 通信表格 -->
    <subtable :table-data="relayData">
      <el-table-column slot="first" label="通信情况" align="center" min-width="10">
        <template slot-scope="scope">
          {{ scope.row.title }}
          <el-tooltip :content="scope.row.detail" placement="top" effect="light">
            <i v-if="scope.row.detail" class="el-icon-warning"/>
          </el-tooltip>
        </template>
      </el-table-column>
      <el-table-column slot="second" label="状态" align="center" min-width="10">
        <template slot-scope="scope">
          <span style="color:#46c37b">
            <i class="el-icon-check"/>
            {{ scope.row.status }}
          </span>
        </template>
      </el-table-column>
    </subtable>
    <!-- 文件目录检查表格 -->
    <subtable :table-label="fileLabel" :table-data="fileData"/>
    <!-- 空间占用表格 -->
    <subtable :table-label="spaceLabel" :table-data="spaceData">
      <el-table-column slot="first" label="系统空间占用" align="center" min-width="10">
        <template slot-scope="scope">
          {{ scope.row.systemSpace }}
          <el-tooltip :content="scope.row.detail" placement="top" effect="light">
            <i v-if="scope.row.detail" class="el-icon-question"/>
          </el-tooltip>
        </template>
      </el-table-column>
    </subtable>
  </div>
</template>

<script>
import subtable from '@/components/Eltable' // 表单
export default {
  components: {
    subtable
  },
  data() {
    return {
      phpLabel: [
        {
          label: '推荐配置',
          prop: 'isNewWin',
          width: '10'
        },
        {
          label: '当前状态',
          prop: 'isOpen',
          width: '10'
        },
        {
          label: '最低要求',
          prop: 'caozuo',
          width: '10'
        }
      ],
      phpData: [
        {
          title: '操作系统',
          isNewWin: 'Lnux',
          isOpen: 'Linux',
          caozuo: '5.3.3'
        }
      ],
      relayData: [
        {
          title: '与Discuz Ucenter的连接',
          status: '未开通Ucenter'
        },
        {
          title: '邮件发送',
          status: '邮件发送正常',
          detail: '每次检测，都会向当前用户发一封测试邮件，请保证当前用户的邮箱正确,邮件异常请到系统日志查看'
        }
      ],
      fileLabel: [
        {
          label: '系统文件、目录权限检查', prop: 'fileCheck', width: '10'
        },
        {
          label: '当前状态', prop: 'currentStatus', width: '10'
        },
        {
          label: '所需状态', prop: 'needStatus', width: '10'
        }
      ],
      fileData: [],
      spaceLabel: [
        {
          label: '可用', prop: 'canUse', width: '10'
        },
        {
          label: '总共', prop: 'all', width: '10'
        },
        {
          label: '剩余', prop: 'remainder', width: '10'
        }
      ],
      spaceData: [
        {
          systemSpace: '/app/logs',
          canUse: '108.78G',
          all: '492.03G',
          remainder: '22%',
          detail: '用户在站点进行操作的日志存放目录'
        }
      ]
    }
  },
  mounted() {
    this.getData()
  },
  methods: {
    // 接口获取数据
    getData() {
    },
    handleSizeChange(val) {
      console.log(val)
      this.currentpage = 1
      this.pagesize = val.value
      if (this.pagesize >= 20) {
        scrollTo(50, 800)
      }
    },
    handleCurrentChange(val) {
      console.log(val)
      this.currentpage = val.value
      if (this.pagesize >= 20) {
        scrollTo(50, 800)
      }
    }
  }
}
</script>

<style lang="scss">
.self-check {
  padding: 0 20px;
}
</style>
